<%@ include file="/WEB-INF/jsp/include.jsp"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<spring:message code="eatingmenu.${eatingMenu.eatingType}" var="eatingtype"/>
<c:set var="page_title"  value="eating menu: ${eatingtype}"/>
<c:set var="eatingMenuId" value="${eatingMenu.id}" scope="request"/>
<c:set var="dayMenuId" value="${eatingMenu.dayMenu.id}" scope="request"/>
<c:set var="usersTableId" value="${eatingMenu.dayMenu.usersTable.id}" scope="request"/>
<html>
<head>
    <title><c:out value="${page_title}"/></title>
    <c:url var="jquery_custom_css" value="/ui/jquery-ui-1.8.4.custom.css" />
    <link href="${jquery_custom_css}" rel="stylesheet" type="text/css" />
    <c:url var="jquery_treeview_css" value="/css/jquery.treeview.css" />
    <link href="${jquery_treeview_css}" rel="stylesheet" type="text/css" />
    <c:url var="housewifes_css" value="/css/housewifes.css" />
    <link href="${housewifes_css}" rel="stylesheet" type="text/css" />

    <c:url var="jquery_js" value="/script/jquery-1.4.2.js" />
    <script type="text/javascript" src="${jquery_js}"></script>
    <c:url var="jquery_cookie_js" value="/script/jquery.cookie.js" />
    <script type="text/javascript" src="${jquery_cookie_js}"></script>
    <c:url var="jquery_treeview_js" value="/script/jquery.treeview.js" />
    <script type="text/javascript" src="${jquery_treeview_js}"></script>
    <c:url var="jquery_custom_js" value="/script/jquery-ui-1.8.4.custom.min.js" />
    <script type="text/javascript" src="${jquery_custom_js}"></script>
    <c:url var="hw_js" value="/script/housewifes.js" />
    <script type="text/javascript" src="${hw_js}"></script>

    <script type="text/javascript">
    $(document).ready(function(){

        var changeCountDialogPointer = $("#change_cnt_dialog_container");
        var rsd = new RecipesSelectDialog("recipes_select_dialog", "<c:url value="/get-select-recipes-form.html"/>", "<c:url value="/get-recipes-list.html"/>");

        var updateActionLinks = function() {
            $(".eating_menu_recipes_count").each(function() {

                var id = $(this).find(".hidden_id").text();
                var name = $("#emr_" + id + " .name").text();
                var countContainer = $(this).find(".count");

                $(this).find(".change_count").click(function() {
                    var count = countContainer.text();

                    changeCountDialogPointer.find(".recipe_name").text(name);
                    changeCountDialogPointer.find(".recipe_id").val(id);
                    changeCountDialogPointer.find(".recipe_count").val(count);

                    changeCountDialogPointer.dialog({
                        modal:true,
                        resizable:false,
                        title: 'set count',
                        minHeight: 300,
                        minWidth: 400
                    });
                });
                $(this).find(".remove_recipe").click(function() {
                    var removeRecipeCallback = function(reply) {
                        if (reply['result'] == "OK") {
                            $("#emr_" + id).remove();
                        } else {
                            alert("error, please reload page");
                        }
                    };
                    removeRecipeFromEatingMenu(
                            "<c:url value="/eatingmenu-recipes-remove.html"/>",
                            id,
                            <c:out value="${usersTableId}"/>,
                            <c:out value="${dayMenuId}"/>,
                            <c:out value="${eatingMenuId}"/>,
                            removeRecipeCallback
                            );
                });
            });
        };

        $("#add_existing_recipe_link").click(function() {
            rsd.onRecipeDialogLinkClick("", "", function(recipeId, recipeName) {
                var addRecipeCallback = function(reply) {
                    if (!reply['existingId']) {
                        $("#eating_menu_recipes_container").append($(reply['html']));
                        makeHover(".change_count", "hover_link");
                        updateActionLinks();
                    } else {
                        $("#emr_" + reply['existingId'] + " .count").text(reply['count']);
                    }
                };
                addExistingRecipeToEatingMenu(
                        "<c:url value="/eatingmenu-recipes-add-existing.html"/>",
                        recipeId,
                        <c:out value="${usersTableId}"/>,
                        <c:out value="${dayMenuId}"/>,
                        <c:out value="${eatingMenuId}"/>,
                        addRecipeCallback
                        );
            });
        });

        makeHover(".dialog_link", "hover_link");

        updateActionLinks();

        $(".set_cnt_btn").click(function() {
            var eatingMenuRecipeId = changeCountDialogPointer.find(".recipe_id").val();
            var count = changeCountDialogPointer.find(".recipe_count").val();
            var updateCountHandler = function(reply) {
                if (reply['result'] == "OK") {
                    $("#emr_" + eatingMenuRecipeId + " .eating_menu_recipes_count").find(".count").text(count);
                }
            };
            updateEatingMenuRecipeCount(
                    "<c:url value="/eatingmenu-recipes-update-count.html"/>",
                    eatingMenuRecipeId,
                    count,
                    <c:out value="${usersTableId}"/>,
                    <c:out value="${dayMenuId}"/>,
                    <c:out value="${eatingMenuId}"/>,
                    updateCountHandler
                    );
            changeCountDialogPointer.dialog("destroy");
        });

    });
    </script>

</head>
<body>
<c:import url="../pagemenus/mainUserMenu.jsp"/>
<br/>
<c:import url="../pagemenus/eatingMenuPageSubMenu.jsp"/>
<br/>
<h3><c:out value="${page_title}"/></h3>
<table>
    <tr>
        <th width="400">dish recipe</th>
        <th width="150">count</th>
        <th width="100">act</th>
    </tr>
    <tr>
        <td colspan="3">
            <div id="eating_menu_recipes_container">
                <c:forEach var="curEatingMenuRecipe" items="${eatingMenu.eatingMenuRecipes}">
                    <c:set var="eatingMenuRecipe" value="${curEatingMenuRecipe}" scope="request"/>
                    <c:import url="eatingMenuRecipeBlock.jsp"/>
                </c:forEach>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="<c:url value="/eatingmenu-recipes-add-new.html"><c:param name="usersTableId" value="${usersTableId}"/><c:param name="dayMenuId" value="${dayMenuId}"/><c:param name="eatingMenuId" value="${eatingMenuId}"/></c:url> ">Create and Add recipe</a>
            &nbsp;
            <a id="add_existing_recipe_link" href="javascript: return void(0);">Add existing recipe</a>
        </td>
    </tr>
</table>

<div id="recipes_select_dialog" style="display:none;">
    <div id="">
        loading recipes groups...
    </div>
</div>
<div id="loading_dialog" style="display:none;">
    <img src="img/loading.gif" style="text-align:center;" width="100%" height="100%" />
</div>

<div id="change_cnt_dialog_container" style="display:none;">
    <input type="hidden" class="recipe_id">
    <p>
    recipe: <span class="recipe_name"></span>
    </p>
    <p>
    count: <input class="recipe_count" value="0"/>
    </p>
    <button class="set_cnt_btn">set count</button>
</div>

</body>
</html>